<script setup name="OrderDesc">
import {userOrderState} from "@/store"
import tab from "@/plugins/tab.js";
import modal from '@/plugins/modal.js'
import {getPhotoList, withdrawPhoto} from "@/api/qiniu.js";

const orderState = userOrderState();

const {proxy} = getCurrentInstance();
const {
  wxz_order_type,
  wxz_order_identity,
  wxz_order_status
} = proxy.useDict(
    'wxz_order_type',
    'wxz_order_identity',
    'wxz_order_status'
);

const detail = ref({})
const imageGroups = ref([])

const onBack = () => {
  orderState.clear()
  const path = detail.value?.archiveTime ? '/wxz/order/history' : '/wxz/order/now'
  tab.closeOpenPage({path})
}

const callPhone = async () => {
  try {
    // 复制到剪贴板
    await navigator.clipboard.writeText(detail.value.phone)
    modal.msgSuccess('电话号码已复制到剪贴板')
  } catch (err) {
    console.error('复制失败', err)
    modal.msgError('复制失败，请手动复制')
  }
}

const onWithdrawAll = () => {
  modal.confirm('是否撤回订单全部图片？').then(async () => {
    try {
      await withdrawPhoto(detail.value.id)
      detail.value.isUploads = 0
      imageGroups.value = [] // 立即清空图片

      modal.msgSuccess('所有图片已撤回')
    } catch (err) {
      console.error(err)
      modal.msgError('撤回失败，请重试')
    }
  })

}

onMounted(async () => {
  detail.value = orderState.order
  if (detail.value.isUploads == 1) {
    imageGroups.value = (await getPhotoList(detail.value.id)).data
  }
})
</script>

<template>
  <div class="detail-page">
    <el-page-header @back="onBack" content="任务详情"/>

    <el-card class="info-card" shadow="never">
      <el-descriptions title="基本信息" :column="4" border>
        <el-descriptions-item label="ID">{{ detail.id }}</el-descriptions-item>
        <el-descriptions-item label="姓名">{{ detail.name }}</el-descriptions-item>
        <el-descriptions-item label="学号">{{ detail.studentId }}</el-descriptions-item>
        <el-descriptions-item label="身份">
          <dict-tag :options="wxz_order_identity" :value="detail.identity"/>
        </el-descriptions-item>
        <el-descriptions-item label="楼栋">{{ detail.building }}</el-descriptions-item>
        <el-descriptions-item label="宿舍">{{ detail.dormitory }}</el-descriptions-item>
        <el-descriptions-item label="电话">
          <el-link type="primary" @click="callPhone">{{ detail.phone }}</el-link>
        </el-descriptions-item>
        <el-descriptions-item label="维修人员">{{ detail.nickName }}</el-descriptions-item>
        <el-descriptions-item label="类型">
          <dict-tag :options="wxz_order_type" :value="detail.type"/>
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <dict-tag :options="wxz_order_status" :value="detail.status"/>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ detail.createTime }}</el-descriptions-item>
        <el-descriptions-item label="完成时间">{{ detail.completionTime }}</el-descriptions-item>
        <el-descriptions-item label="订单详情">{{ detail.details }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 图片分组 -->
    <el-card v-if="detail.isUploads == 1 && !detail.value?.archiveTime"
             class="image-card"
             shadow="never">
      <div class="image-card-header">
        <h3>图片</h3>
        <!-- 总撤回按钮 -->
        <el-button
            type="danger"
            icon="remove"
            @click="onWithdrawAll"
            v-hasPermi="['wxz:order:edit']"
        >
          撤回全部图片
        </el-button>
      </div>

      <div v-for="(group, index) in imageGroups" :key="index" class="image-group">
        <div class="group-title">图片组 {{ index }}</div>
        <div class="group-images">
          <el-image
              v-for="(img, i) in group"
              :key="i"
              style="width: 100px; height: 100px; margin: 5px"
              :src="img"
              :preview-src-list="group"
              fit="cover"
          />
        </div>
      </div>
    </el-card>

    <!-- 底部按钮 -->
    <div class="footer-btn">
      <el-button type="primary" @click="onBack">返回任务列表</el-button>
    </div>
  </div>
</template>


<style scoped lang="scss">
.detail-page {
  padding: 20px;
}

.info-card, .image-card {
  margin-bottom: 20px;
}

.image-group {
  margin-bottom: 15px;
}

.group-title {
  font-weight: 500;
  margin-bottom: 8px;
}

.group-images {
  display: flex;
  flex-wrap: wrap;
}

.image-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

</style>
